<!DOCTYPE html>
<html lang="en">
<head>
    <!-- 页面meta -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>绩效考核管理系统</title>
    <meta name="description" content="绩效考核管理系统">
    <meta name="keywords" content="绩效考核管理系统">
    <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
    <!-- 引入样式 -->
    <link rel="stylesheet" href="../plugins/elementui/index.css">
    <link rel="stylesheet" href="../plugins/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="../css/style.css">
    <!-- 引入组件库 -->
    <script type="text/javascript" src="../js/jquery.min.js"></script>
    <script src="../js/vue.js"></script>
    <script src="../plugins/elementui/index.js"></script>
    <script src="../js/axios-0.18.0.js"></script>
</head>
<body class="hold-transition">
    <div id="app">
        <div class="content-header">
            <h1>团队工作上报管理<small>团队工作上报</small></h1>
            <el-breadcrumb separator-class="el-icon-arrow-right" class="breadcrumb">
                <el-breadcrumb-item>团队工作</el-breadcrumb-item>
                <el-breadcrumb-item>新建上报</el-breadcrumb-item>
                <el-breadcrumb-item><span style="font-weight: bolder">选择成员与模式</span></el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="app-container">
            <div class="box">
                <!--表格-->
                <div>
                    <span>选择填报模式：</span>
                    <template>
                        <el-radio v-model="radio" label="1">模板复制模式</el-radio>
                        <el-radio v-model="radio" label="2">按人填报模式</el-radio>
                    </template>
                </div>
                <hr>
                <div style="margin-bottom: 10px"><span>选择团队成员：</span></div>
                <el-tree
                        :data="checkboxData"
                        show-checkbox
                        default-expand-all
                        node-key="id"
                        ref="tree"
                        highlight-current
                        :props="defaultProps">
                </el-tree>
                <hr style="height:2px;border-radius: 3px; background-color: #3c8dbc">
                <div class="buttons" style="text-align: center">
                    <el-button type="primary" @click="resetChecked" plain>清空重选</el-button>
                    <el-button type="success" @click="getCheckedNodes" plain>提交</el-button>
                    <el-button type="danger" @click="giveUp()" plain>放弃填报</el-button>
                </div>
            </div>
        </div>
    </div>
</body>
<script>
    var vue = new Vue({
        el: '#app',
        data:function () {
            return {
                <!--与上报模式（单选）相关的参数-->
                radio: '1',
                <!--与人员（多选框）相关的参数-->
                // departments:[],
                checkboxData: [],
                defaultProps: {
                    label: 'label',
                    children: 'children'
                },

            };
        },
        created() {
            this.findAll();
        },
        methods: {

            getCheckedNodes() {
                console.log(this.$refs.tree.getCheckedNodes());
                sessionStorage.setItem("checkboxData",JSON.stringify(this.$refs.tree.getCheckedNodes()));
                if (this.radio === '1'){
                    window.location.href="copy_model.html";
                }else{
                    window.location.href="copy_model2.html";
                }
            },

            resetChecked() {
                this.$refs.tree.setCheckedKeys([]);
            },

            recursiveAssignment(listData){
                let list = [];
                listData.forEach(item => {
                    let map = {
                        id:'',
                        label:'',
                        idCardNumber:''
                    };
                    if (item.children){
                        map.children = this.recursiveAssignment(item.children)
                    };
                    list.push(map)
                })
                return list;
            },

            findAll(){
                axios.get("/kpi_assess/departmentEmployees").then((resp)=>{
                    console.log(resp.data.data);
                    this.checkboxData = this.recursiveAssignment(resp.data.data);
                    let departmentsLength = resp.data.data.length;
                    for (let i = 0; i < departmentsLength; i++) {
                        this.checkboxData[i].id = resp.data.data[i].id;
                        this.checkboxData[i].label = resp.data.data[i].department;
                        let employeesLength = resp.data.data[i].children.length;
                        for (let j = 0; j < employeesLength; j++) {
                            this.checkboxData[i].children[j].id = resp.data.data[i].id + '-'+resp.data.data[i].children[j].id;
                            this.checkboxData[i].children[j].label = resp.data.data[i].children[j].username;
                            this.checkboxData[i].children[j].idCardNumber = resp.data.data[i].children[j].idCardNumber;
                        }
                    }
                });
            },
            <!--放弃填报-->
            giveUp(){
                //跳转到首页
                window.location.href="welcome.html";
            },
        }
    })
</script>
</html>